<template>
  <div>
    <div class="bodys" v-for="(v,i) in data1" :key="i" style="position:relative;" v-if="i>=3" @click="click(v)">
      <div class="left">
        <div class="tag" style="padding-top: -1vw">
          {{i + 1}}
        </div>
        <img :src="v.image" alt="">
      </div>
      <div class="right">
        <p class="goodsName">{{v.goods_name}}</p>
        <p style="color: #666;font-size: 13px;">{{v.decoration}}</p>
        <p style="    position: absolute;top: 21vw;width: 54vw;">
          <span class="price">￥{{v.sell_price}}</span><br/>
          <span class="linePrice">￥{{v.market_price}}</span>
          <button id="button">立即购</button>
        </p>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "topList",
    props:["topList",'data1'],
    data(){
      return{
        limit_id:0,
        group_id:0,
        join_id:0,
        type:1,
        activity_id:0,
        platform:this.$route.query.version,
      }
    },
    methods:{
      click(v){
        var ua = window.navigator.userAgent.toLowerCase();
        if (this._globe.isAndroid) {
          if (window.android != null && typeof window.android != "undefined") {
              window.android.openGoods(this.type,v.goods_id,this.join_id,this.limit_id,this.group_id,this.activity_id);//
          }else if (ua.match(/micromessenger/i) == 'micromessenger'){
            wx.miniProgram.getEnv((res)=> {
              if (res.miniprogram) {
                var url= '../../pages/detail/main?type='+this.type+'&goods_id='+v.goods_id+'&join_id='+this.join_id+'&limit_id='+this.limit_id+'&group_id='+this.group_id+'&activity_id='+this.activity_id;
                wx.miniProgram.navigateTo({
                  url: url,
                })
              }
            })
          }else {
            this.$router.push({
              path:'detail',query:{type:this.type,goods_id:v.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:this.group_id,activity_id:this.activity_id}
            })
          }
        }
        if (this._globe.isIos) {
          if (window.webkit) {
              window.webkit.messageHandlers.openGoods.postMessage
              ({type:this.type,goods_id:v.goods_id,join_id:this.join_id,limit_id:this.limit_id,group_id:this.group_id,activity_id:this.activity_id
              });//
            /* window.webkit.messageHandlers.callAppHelp.postMessage(num)*/
          }else if (ua.match(/micromessenger/i) == 'micromessenger'){
            wx.miniProgram.getEnv((res)=> {
              if (res.miniprogram) {
                var url= '../../pages/detail/main?type='+this.type+'&goods_id='+v.goods_id+'&join_id='+this.join_id+'&limit_id='+this.limit_id+'&group_id='+this.group_id+'&activity_id='+this.activity_id;
                wx.miniProgram.navigateTo({
                  url: url,
                })
              }
            })
          }else {
            this.$router.push({
              path:'detail',query:{type:this.type,goods_id:v.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:this.group_id,activity_id:this.activity_id}
            })
          }
        }
      }
    },
    mounted(){
      window.openGoods= this.click();
      window.webkit.openGoods= this.click();
    }
  }
</script>

<style scoped lang="scss">
  .goodsName{
    color: #333 !important;
    font-size: 15px !important;
    width: 54vw;
    margin-top: -4vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
    height: 12vw;
    line-height: 6vw;
  }
  .bodys{
    margin: 0px auto;
    margin-top: 4vw;
    width:92vw;
    height: 40vw;
    background: #fff;
    border-radius: 3vw;
    .left{
      float: left;
      width: 26.67vw;
      height: 26.67vw;
      margin-left: 4vw;
      margin-top: 6.6vw;
      .tag{
        width: 5vw;
        height: 5vw;
        background-image: url("../../assets/img/biaoqian@2x.png");
        background-size: 100% 100%;
        position: relative;
        font-size: 13px;
        color: #fff;
        text-align: center;
        line-height: 5vw;
        top: -1vw;
      }
      img{
        display: inline-block;
        height: 100%;
        margin: 0px auto;
        margin-top: -6vw;
      }
    }
    .right{
      margin-top: 8vw;
      margin-right: 4vw;
      float: right;
      p{

        .price{
          font-size: 17px;
          color: #ff4c50;
        }
        .linePrice{
          color: #666;
          font-size: 13px;
          text-decoration: line-through;
          margin-left: 1vw;
        }
        button{
          background: #ff4c50;
          height: 8vw;
          width: 18vw;
          font-size: 12px;
          color: #fff;
          -webkit-border-radius: 1.5vw;
          -moz-border-radius: 1.5vw;
          border-radius: 1.5vw;
          float: right;
          margin-top: -2vw;
          position: relative;
          top: -1vw;
        }
      }
    }
  }
  .van-tag--danger{
    position: relative;
  }
</style>
